<template>
  <section class="upload-info-type-table common-text-block-section">
     <div class="title-section">
        <div class="title">
          数据信息
        
      <!-- <div class="title">
          <el-button slot="reference" @click="switchTab(1)">工资表</el-button>
          <el-button @click="switchTab(2)">人员信息表</el-button>
      </div> -->
          <div class="title-btns">
            <template>
              <el-button
                icon="el-icon-document-add"
                type="primary"
                @click.native="exportToExcel"
                size="small"
                >导出Excel</el-button
              >
              <el-button
                @click.native="back"
                size="small"
                >返回</el-button
              >
            </template>
          </div>
          </div>
      <div class="right" style="float:right;" >
            <span class="edit-text">编辑信息</span>
            <el-switch v-model="switchValue"></el-switch>
      </div>
    </div>
    <div class="table-view">
      <el-tabs v-model="tabName" tab-position="left" lazy @tab-click="switchTab">
          <el-tab-pane label="工资表" name="salaryInfo">
        <el-row v-if="tab==1">
        	<el-col :span="24">
		        <el-table id="table-1" class="tb-edit" size="mini" :data="salarys" border style="width: 100%" highlight-current-row>
		          <el-table-column v-for="(v,i) in salaryColumns" :prop="v.field" :label="v.title" :width="v.width" :key="i">
                <template slot-scope="scope">
			              <el-input v-if="switchValue" size="mini" :rows="2" placeholder="请输入内容" v-model="scope.row[v.field]">
			              </el-input> 
		                <span v-else>{{scope.row[v.field]}}
                    </span>
		            </template>
              </el-table-column>
              <el-table-column fixed="right" v-if="switchValue" label="操作" width="100">
                <template slot-scope="scope">
                <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                      删除
                </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        <el-col v-if="switchValue" :span="24">
		      <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
		    </el-col>
      </el-row>
      </el-tab-pane>
      <el-tab-pane label="人员信息表" name="personInfo">
        <el-row v-if="tab!=1">
        	<el-col :span="24">
		        <el-table id="table-2" class="tb-edit" size="mini" :data="personInfos" border style="width: 100%" highlight-current-row>
		          <el-table-column v-for="(v,i) in personinfoColumns" :prop="v.field" :label="v.title" :width="v.width" :key="i">
                <template slot-scope="scope">
			              <el-input v-if="switchValue" size="mini" :rows="2" placeholder="请输入内容" v-model="scope.row[v.field]">
			              </el-input> 
		                <span v-else>{{scope.row[v.field]}}
                    </span>
		            </template>
              </el-table-column>
              <el-table-column fixed="right" v-if="switchValue" label="操作" width="100">
                <template slot-scope="scope">
                <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                      删除
                </span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        <el-col v-if="switchValue" :span="24">
		      <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
		    </el-col>
        </el-row>
      </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>

<script>
import { oneKeyBillStatusList, oneKeyBillStatusObj } from "@/components/map";
import { delObjNullKey } from "@/components/utiles";
import utiles from '@/components/utiles';
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  components: {
  },
  props: {
    type: {
      type: Number,
    },
    month:{
      type: String,
    },
    cName:{
      type: String,
    }
  },
  data() {
    return {
      tabName: "salaryInfo",
      switchValue:false,
      tab:1,
      salarys:[],
      personInfos:[],
      salaryColumns: [
        { field: "empNumber", title: "工号", width: 60 },
	    	{ field: "name", title: "*姓名", width: 60},
        { field: "idType", title: "*证件类型", width: 60 },
        { field: "idNumber", title: "*证件号码", width: 70 },
        { field: "income", title: "本期收入", width: 60 },
        { field: "incomeWithoutTax", title: "本期免税收入", width: 60 },
        { field: "endowmentInsurance", title: "基本养老保险", width: 60 },
        { field: "medicalInsurance", title: "基本医疗保险费", width: 60 },
        { field: "unemploymentInsurance", title: "*失业保险费", width: 60 },
        { field: "houseFund", title: "*住房公积金", width: 60 },
        { field: "childEducation", title: "*累计子女教育", width: 60 },
        { field: "continousEducation", title: "*累计继续教育", width: 60 },
        { field: "houseLoan", title: "累计住房贷款利息", width: 60 },
        { field: "rentGold", title: "*累计住房租金", width: 60 },
        { field: "oldManGold", title: "*累计赡养老人", width: 60 },
        { field: "enterpriseGold", title: "*企业(职业)年金", width: 60 },
        { field: "businessGold", title: "商业健康保险", width: 60 },
        { field: "TaxDelayGold", title: "税延养老保险", width: 60 },
        { field: "rests", title: "其他", width: 60 },
        { field: "donateGold", title: "准予扣除的捐赠额", width: 60 },
        { field: "exemptGold", title: "减免税额", width: 60 },
        { field: "remark", title: "备注", width: 60 }
		],
    personinfoColumns: [
        { field: "empNumber", title: "工号", width: 60 },
	    	{ field: "name", title: "*姓名", width: 60 },
        { field: "idType", title: "*证件类型", width: 60 },
        { field: "idNumber", title: "*证件号码", width: 60 },
        { field: "nationality", title: "*国籍(地区)", width: 60 },
        { field: "sex", title: "性别", width: 60 },
        { field: "birthDate", title: "*出生日期", width: 60 },
        { field: "empStatus", title: "人员状态", width: 60 },
        { field: "Practitioners", title: "*任职受雇从业类型", width: 60 },
        { field: "jobSituation", title: "入职年度就业情形", width: 60 },
        { field: "phone", title: "手机号码", width: 60 },
        { field: "hireDate", title: "任职受雇从业日期", width: 60 },
        { field: "dimissionDate", title: "离职日期", width: 60 },
        { field: "disabilityMsg", title: "是否残疾", width: 60 },
        { field: "martyrMsg", title: "是否烈属", width: 60 },
        { field: "martyrNumber", title: "烈属证号", width: 60 },
        { field: "oldSolitudeMsg", title: "是否孤老", width: 60 },
        { field: "disabilityNumber", title: "残疾证号", width: 60 },
        { field: "takeOutMsg", title: "是否扣除减除费用", width: 60 },
        { field: "investValue", title: "个人投资额", width: 60 },
        { field: "investRate", title: "个人投资比例(%)", width: 60 },
        { field: "remark", title: "备注", width: 60 },
        { field: "chinaName", title: "中文名", width: 60 },
        { field: "involveTaxMsg", title: "涉税事由", width: 60 },
        { field: "birthCountry", title: "出生国家(地区)", width: 60 },
        { field: "firstEnterDate", title: "首次入境时间", width: 60 },
        { field: "expectedDepartureDate", title: "预计离境时间", width: 60 },
        { field: "restsIdType", title: "其他证件类型", width: 60 },
        { field: "restsIdNumber", title: "其他证件号码", width: 60 },
        { field: "censusRegisterPro", title: "户籍所在地(省)", width: 60 },
        { field: "censusRegisterCity", title: "户籍所在地(市)", width: 60 },
        { field: "censusRegisterArea", title: "户籍所在地(区县)", width: 60 },
        { field: "censusRegisterDetail", title: "户籍所在地(详细地址)", width: 60 },
        { field: "residencePro", title: "经常居住地(省)", width: 60 },
        { field: "residenceCity", title: "经常居住地(市)", width: 60 },
        { field: "residenceArea", title: "经常居住地(区县)", width: 60 },
        { field: "residenceAreaDetail", title: "经常居住地(详细地址)", width: 60 },
        { field: "contactPro", title: "联系地址(省)", width: 60 },
        { field: "contactCity", title: "联系地址(市)", width: 60 },
        { field: "contactArea", title: "联系地址(区县)", width: 60 },
        { field: "contactDetail", title: "联系地址(详细地址)", width: 60 },
        { field: "email", title: "电子邮箱", width: 60 },
        { field: "educateBack", title: "学历", width: 60 },
        { field: "openBank", title: "开户银行", width: 60 },
        { field: "bankNumber", title: "银行账号", width: 60 },
        { field: "oepnAccountBankProvience", title: "开户行省份", width: 60 },
        { field: "role", title: "职务", width: 60 }
		],
    isCheckStatus: false,
    total: 0,
    tableData: [],
    currentPage: 1,
    pageSize: 20,
    oneKeyBillStatusList,
    oneKeyBillStatusObj,
    searchParams: {
      incomeTaxStatus: "",
      companyName: "",
    },
    activeName:"first"
  };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData(isReset = false) {
      if (this.tab == 1) {
        this.$http.get("/incomeTax/getSalaryMsgList", {params: {cName:this.cName, month: this.month}}).then(res=>{
        if (res.code != 0) {
          return this.$message.error("查看详情失败！！");
        }
          this.salarys = res.data.employeeSalaryList;
          this.$emit("taxAmountRefresh", res.data.incomeTax);
      }).catch(err=>{return this.$message.error("查看详情失败！！");});
      } else {
        this.$http.get("/incomeTax/getEmployeeMsgList", {params: {cName:this.cName, month: this.month}}).then(res=>{
        if (res.code != 0) {
          return this.$message.error("查看详情失败！！");
        }
        this.personInfos = res.data.employeeList;
        this.$emit("taxAmountRefresh", res.data.incomeTax);
      }).catch(err=>{
        return this.$message.error("查看详情失败！！");
      });
      }
    },
    addMasterUser() {
    if (this.tab==1){
			let j = {
          businessGold: 0,
          childEducation: 0,
          continueEducation: 0,
          donateGold: 0,
          empNumber: "",
          endowmentInsurance: 0,
          enterpriseGold: 0,
          exemptGold: 0,
          houseFund: 0,
          houseLoan: 0,
          idNumber: "",
          idType: "",
          income: 0,
          incomeWithoutTax: 0,
          medicalInsurance: 0,
          name: "",
          oldManGold: 0,
          remark: "",
          rentGold: 0,
          rests: "",
          taxDelayGold: 0,
          unemploymentInsurance: 0
        };
			this.salarys.push(j);
      console.log("salary:", this.salarys)
			// app.master_user.sel = JSON.parse(JSON.stringify(j));
		} else {
      let j = {
          bankNumber: "",
          birthCountry: "",
          birthDate: "",
          censusRegisterArea: "",
          censusRegisterCity: "",
          censusRegisterDetail: "",
          censusRegisterPro: "",
          chinaName: "",
          contactArea: "",
          contactCity: "",
          contactDetail: "",
          contactPro: "",
          dimissionDate: "",
          disabilityMsg: "",
          disabilityNumber: "",
          educateBack: "",
          email: "",
          empNumber: "",
          empStatus: "",
          expectedDepartureDate: "",
          firstEnterDate: "",
          hireDate: "",
          idNumber: "",
          idType: "",
          investRate: "",
          investValue: 0,
          involveTaxMsg: "",
          jobSituation: "",
          martyrMsg: "",
          martyrNumber: "",
          name: "",
          nationality: "",
          oldSolitudeMsg: "",
          openBank: "",
          phone: "",
          practitioners: "",
          remark: "",
          residenceArea: "",
          residenceAreaDetail: "",
          residenceCity: "",
          residencePro: "",
          restsIdNumber: "",
          restsIdType: "",
          role: "",
          sex: "",
          takeOutMsg: ""
        }
			this.personInfos.push(j);
      console.log("salary:", this.salarys)
    }
    },
    switchTab(tab, event){
      if (tab.name == "salaryInfo"){
        this.tab = 1;
      }
      if (tab.name == "personInfo"){
        this.tab = 2;
      }
      this.loadData();
    },
    pwdChange(row, index, cg) {
			//点击修改 判断是否已经保存所有操作
      if (this.tab == 1){
        this.salarys.splice(index,1);
      } else {
        this.personInfos.splice(index,1);
      }
    },

    //导出Excel
    exportToExcel () {
      let idName = "";
      if (this.tab === 1){
        idName = "table-1"
      } else {
        idName = "table-2"
      }
    let et = XLSX.utils.table_to_book(document.getElementById(idName)); //此处传入table的DOM节点
    let etout = XLSX.write(et, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    });
    try {
        FileSaver.saveAs(new Blob([etout], {
            type: 'application/octet-stream'
        }), 'info-table.xlsx'); //info-table.xlsx 为导出的文件名
    } catch (e) {
    console.log(e, etout) ;
    }
    return etout;
    },
    back(){
      this.$router.back();
    }
  },
  watch:{
        switchValue:function(val){
          //开始编辑
          if(val){
            this.salaryColumns = this.salaryColumns.map(element =>{
              element.width=110;
              return element;
            })
              this.personinfoColumns = this.personinfoColumns.map(element =>{
              element.width=110;
              return element;
            })
          } else {
          //编辑完成
            this.salaryColumns = this.salaryColumns.map(element =>{
              element.width=60;
              return element
            })
              this.personinfoColumns = this.personinfoColumns.map(element =>{
              element.width=60;
              return element
            })
            if (this.tab == 1){
              let params = {
                cname: this.cName,
                month: this.month,
                salaryList: this.salarys
              }
              this.$http.post("/incomeTax/saveSalaryMsgList", params).then((res) => {
                if (res.code == 0) {
                  this.$message.success("工资表保存成功");
                } else {
                  this.$message.error("工资表保存失败");
                }
              })
            } else {
              let params = {
                cname: this.cName,
                month: this.month,
                employeeList: this.personInfos
              }
              this.$http.post("/incomeTax/saveEmployeeMsgList", params).then((res) => {
                if (res.code == 0) {
                  this.$message.success("人员信息表保存成功");
                } else {
                  this.$message.error("人员信息表保存失败");
                }
              })
            }
          }
    },
  }
};
</script>

<style lang="less" scoped>
.upload-info-type-table {
  padding: 0 10px;
  .top-line {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    text-align: right;
    padding: 20px 0 0;
  }
}

.error-status {
  color: #ff0000;
}

// .tb-edit .el-input {
// 	display: none
// }
// .tb-edit .current-row .el-input {
// 	display: block
// }
// .tb-edit .current-row .el-input+span {
// 	display: none
// }

.el-table-add-row {
		margin-top: 10px;
		width: 100%;
		height: 34px;
		border: 1px dashed #c1c1cd;
		border-radius: 3px;
		cursor: pointer;
		justify-content: center;
		display: flex;
		line-height: 34px;
}

.table-view{
  width: 100%;
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .left {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .right {
    display: inline-flex;
    align-items: center;
    .edit-text{
      padding-right: 10px;
    }
  }
}

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .right {
    display: inline-flex;
    align-items: center;
  }
  .edit-text {
    margin-right: 5px;
  }
}
.title-btns {
  margin-left: 20px;
}
</style>